<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-image: url(../img/bg.jpg);
			}
			.wp{
				height: 32px;
				line-height: 32px;
				background-color: rgba(74,103,142,0.8);
				width: 100%;
				font-size: 12px;
				color: #fff;
			}
			.left{
				margin-left: 15px;
				float: left;
			}
			ul,li{
				list-style: none;
			}
			ul:after{
				content: "";
				display: block;
				clear: both;
			}
			li{
				float: left;
			}
			li img{
				position: relative;
				top: 6px;
    			left: 0;
			}
			li a{
				color: #fff;
			}
			.mr-19{
				margin-right: 19px;
			}
			.mr-7{
				margin-right: 7px;
			}
			.blod{
				font-weight: bold;
			}
			.right{
				float: right;
			}
			.r-ul li{
				font-weight: bold;
				margin-right: 19px;
				font-size: 13px;
			}
			.r-ul span{
				width: 86px;
				height: 32px;
				display: inline-block;
				background: #398bfb;
				color: #fff;
				text-align: center;
			}
		</style>
	</head>
	<body>
		
		<div class="wp">
			<div class="left">
				<ul>
					<li>北京：</li>
					<li class="mr-7"><img src="../img/a1.png" alt="" /></li>
					<li class="mr-7 blod">2℃</li>
					<li style="color: #38f;" class="mr-7 blod">优</li>
					<li class="mr-7 blod">24</li>
					<li class="mr-7">|</li>
					<li class="mr-19"><a href="">宝箱</a></li>
					<li class="mr-19"><a href="">换肤</a></li>
					<li class="mr-19"><a href="">消息</a></li>
				</ul>
			</div>
			<div class="right">
				<ul class="r-ul">
					<li><a href="">糯米</a></li>
					<li><a href="">新闻</a></li>
					<li><a href="">hao123</a></li>
					<li><a href="">地图</a></li>
					<li><a href="">视频</a></li>
					<li><a href="">贴吧</a></li>
					<li style="font-weight: normal;"><a href="">用户名</a></li>
					<li style="font-weight: normal;"><a href="">设置</a></li>
					<span>更多产品</span>
				</ul>
			</div>
		</div>
		
	</body>
</html>
